<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>动画</title>
  <style>
    img {
      position: relative;
    }
  </style>
</head>

<body>
  <img id="s1" src="img/star.png"><br />
  <img id="s2" src="img/star.png"><br />
  <img id="s3" src="img/star.png"><br />
  <img id="s4" src="img/star.png"><br />

  <script src="js/jquery-1.11.3.js"></script>
  <script>
    // s1在屏幕左上角的小星星， 点击后从左移动到屏幕右边
    // s2在屏幕左上角的小星星，点击后从左移动到屏幕右边，再移动到下边——走直角
    // s3在屏幕左上角的小星星，点击后从左上角移动到屏幕右下边，走斜线
    // s4点击小星星，变大、变淡....  直至消失
    $("#s1").click(function () {
      $(this).animate({
        left: 400
      }, 2000);
    });

    $("#s2").click(function () {
      $(this).animate({
        left: 600
      }, 2000);
      $(this).animate({
        top: 400
      }, 2000);
    });

    $("#s3").click(function () {
      $(this).animate({
        left: 600,
        top: 400
      }, 2000);
    });

    $("#s4").click(function () {
      alert()
      $(this).animate({
        width: 172,
        height: 172,
        opacity: 0
      }, 2000, function () {
        $(this).hide();
      })
    });
  </script>
</body>

</html>